<template>
	<view class="container1">
		<view class="tmt-header">
			<view class="select-wrap">
				<view class="p20" @click="changMonth(-1)">
					<van-icon name="arrow-left" />
				</view>
				<view class="time">
					{{currentYearMonth.year}}年{{currentYearMonth.month}}月
				</view>
				<view class="p20" @click="changMonth(1)">
					<van-icon name="arrow" />
				</view>
			</view>
			<p class="sm" @click="smShow = true"><van-icon name="warning-o" style="margin-right:4rpx"/>活动说明</p>
		</view>
		<view class="tmt-content">
			<view class="tmt-week-wrap">
				<view class="cell week-item" v-for="(item,index) in week" :key="index">{{ item.label }}</view>
			</view>
			<view class="tmt-day-wrap" :style="[{height:unfold ?contentHeight:'88rpx'}]">
				<view class="cell" v-for="i of blankDay"></view>
				<view class="cell" v-for="(item,index) in daysArr">
					<view class="dayText">
						<!-- {{ item.today?'今':item.day }} -->
						<span v-if="item.today" style="color:#FF6600">今</span>
						<span v-else>{{item.day}}</span>
						<div v-if="item.normal" class="normal">
							<div class="star">
								<p>{{item.num}}</p>
								<img src="/static/images/dk_star.png" alt="">
							</div>
						</div>
					</view>
				</view>
			</view> 
		</view>
		<!-- <view v-if="showBtn" class="tmt-footer" @click="unfold =!unfold ">
			<van-icon :name="unfold?'arrow-down':'arrow-up'" style="color:#aaa"/>
		</view> -->

		<!-- 活动说明 -->
		<div class="wifi_pop">
			<van-popup :show="smShow">
				<div class="box">
					<img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20240124/wT6xHMgDNLzwt1qw6xfP.png"
						alt="">
					<div class="nr">
						<p class="name">活动说明</p> 
						<!-- <p class="text">您正在使用<span>4</span><img src="/static/images/dk_star.png" alt="">兑换</p>
						<p class="room_name">应许之地4小时中包</p> -->
						<div class="zhanghao">
							<p>1.2023年9月20日起，用户在应许之地小程序内购买任意套餐使用，可获得1颗星值，每单可重复获得星值，多买多得。
								消费满指定数量，可通过星值兑换优惠及房间免费使用时长;</p>
							<p>2.使用「0元任意卷」等特殊福利券购买的套餐，暂不参与攒星活动，下单将无法获得对应星值，具体以应许之地小程序结算后星值到账提示为准;</p>
							<p>3.通过应许之地小程序/美团/抖音购买套餐使用均可累积星值;</p>
							<p>4.用户应以正当、诚信方式参与活动，否则应许之地有权撤销用户的活动参与资格并有权回收用户已经获得的奖励权益(包括追偿已使用部分);</p>
						</div>
						<p class="anniu" @click="smShow = false">我知道了</p>
					</div>
				</div>
				<p class="close" @click="smShow = false">
					<img src="/static/images/close1.png" alt="">
				</p>
			</van-popup>
		</div>
	</view>
</template>

<script>
	export default {
		name: "calendar",
		data() {
			return {
				showPop: false,
				unfold: true,
				week: [{
						label: '一',
						value: 1
					},
					{
						label: '二',
						value: 2
					},
					{
						label: '三',
						value: 3
					},
					{
						label: '四',
						value: 4
					},
					{
						label: '五',
						value: 5
					},
					{
						label: '六',
						value: 6
					},
					{
						label: '日',
						value: 7
					},
				],
				blankDay: 0, //空白天数
				today: {}, //当天
				current: {}, //当前的年月
				daysArr: [],
				list: [], //需要下标的日期
				currentYearMonth: {}, //当前年月
				smShow:false
			};
		},
		computed: {
			contentHeight() {
				let height = Math.ceil((this.blankDay + this.daysArr.length) / 7) * 88
				return height + 'rpx'
			}
		},
		watch: { 
			pointList:{
				handler(newValue, oldValue) {
					this.list = []
					this.list = newValue
					this.fomatePointTime()
					this.init(this.defaultDate == '')
				},
				deep: true,
				immediate: true
			},
		},
		props: {
			pointList: {
				type: Array,
				default () {
					return []
				}
			},
			defaultDate: {
				type: String,
				default () {
					return ''
				}
			},
			showBtn: {
				type: Boolean,
				default () {
					return true
				}
			},
			show: {
				type: Boolean,
				default () {
					return true
				}
			},
			background: {
				type: String,
				default () {
					return '#fff'
				}
			},
            selectBg:{
				type: String,
				default () {
					return '#255ada'
				}
            },
        
            backColor:{
				type: String,
				default () {
					return '#fff'
				}
            },
            unfoldBtnColor:{
				type: String,
				default () {
					return '#fff'
				}
            }
		},
		mounted() {
			this.unfold = this.show
		},
		created() {
		},
		methods: {
			changMonth(num) {
				const {
					year,
					month
				} = this.getMonthYear(num)
				this.makeCalendar(year, month)
			},
			// 获取前几个月,未来几个月的年份和月份
			getMonthYear(num) {
				let month = this.currentYearMonth.month
				let year = this.currentYearMonth.year
				let year2 = year
				let month2 = month + num
				if (month + num <= 0) {
					// 之前年份
					year2 = year - 1 - parseInt(Math.abs(month2) / 12)
					month2 = 12 - (Math.abs(month2) % 12)
				} else if ((month2 / 12) > 1) {
					// 之后年份
					year2 = year + (month2 % 12 == 0 ? 0 : parseInt(month2 / 12))
					month2 = parseInt(month2 % 12) == 0 ? 12 : parseInt(month2 % 12)
				}
				return {
					year: year2,
					month: month2
				}
			},
			changeDay(item) {
				this.current = item
				let {year,month,day} = item
				this.$emit('changeDate',{year,month,day})
			},
			// 获取某年某月的天数
			getDays(year, month) {
				let now = new Date(year, month, 0)
				return now.getDate()
			},
			//获取某一天为星期几
			getWeekByDay(time) {
				let day = new Date(Date.parse(time.replace(/-/g, '/'))); //将日期值格式化
				return day.getDay() == 0 ? 7 : day.getDay();
			},
			init(nowTime) {
				let setTime = nowTime ? new Date() : new Date(this.defaultDate)
				let year = setTime.getFullYear()
				let month = setTime.getMonth() + 1
				let day = setTime.getDate()
				if(!(this.defaultDate!='' && nowTime) ){
					this.current = {
						year,
						month,
						day,
					}
				}
				this.today = {
					year: new Date().getFullYear(),
					month: new Date().getMonth() + 1,
					day: new Date().getDate()
				}
				this.makeCalendar(year, month)
			},
			fomatePointTime() {
				let pointList = this.list
				pointList.map(item => {
					item.reachTime = item.reachTime.replace(/-/g, '/') //期值格式化
					let timeArr = item.reachTime.split('/')
					let timeStr = ''
					timeArr.map(time => {
						time = parseInt(time)
						timeStr += time
						item.reachTime = timeStr
						// console.log(item.time)
					})
				})
				this.list = pointList
			},
			makeCalendar(year, month) {
				let today = this.today
				let days = this.getDays(year, month) //当月天数
				let firstDayWeek = this.getWeekByDay(`${year}-${month}-1`) //获取每个月第一天的星期
				let weekIndex = this.week.findIndex(item => {
					return item.value == firstDayWeek
				})
				let daysArr = []
				// console.log(this.list)
				for (let i = 1; i <= days; i++) {
					let normal = this.list.findIndex(item => {
						if(item.reachTime == String(year) + String(month) + String(i)){
							return true
						}
					}) != -1
					let numIndex = this.list.findIndex(item => item.reachTime == String(year) + String(month) + String(i))
					daysArr.push({
						year,
						month,
						day: i,
						normal,
						num:this.list[numIndex]?this.list[numIndex].orderNum:'',
						today: year == today.year && month == today.month && i == today.day
					})
				}
				this.currentYearMonth = {
					year,
					month
				}
				this.daysArr = daysArr
				this.blankDay = weekIndex == -1 ? 0 : weekIndex
			},
		},
	}
</script>

<style lang="scss" scoped>
	.p20 {
		padding: 20rpx;
	}

	.container1 {
		padding: 0 20rpx;
	}

	.tmt-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0 0 0;
		.sm{
			width: 140rpx;
			height: 44rpx;
			line-height: 44rpx;
			background: rgba(0,0,0,0.2);
			border-radius: 24rpx;
			font-size: 22rpx;
			color:#fff;
			text-align: center;
		}
		.select-wrap {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			.arrow-left {
				width: 18rpx;
				height: 18rpx;
				transform: rotate(45deg);
                border-left-width: 1rpx;
                border-bottom-width: 1rpx;
                border-left-style: solid;
                border-bottom-style: solid;
			}

			.time {
				font-size: 28rpx;
			}

			.arrow-right {
				width: 18rpx;
				height: 18rpx;
				transform: rotate(45deg);
                border-top-width: 1rpx;
                border-right-width: 1rpx;
                border-top-style: solid;
                border-right-style: solid;
			}
		}
	}

	.cell {
		width: 14.28%;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		color: #999999;
		font-size: 30rpx;
		.point {
			width: 6rpx;
			height: 6rpx;
			position: absolute;
			bottom: 3rpx;
			border-radius: 50%;
			left: 50%;
			transform: translateX(-50%);
		}

		.dayText {
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 50%;
			font-size:30rpx;
			color:#666666;
			background: #fff;
			position: relative;
		}
		.normal{
			width: 60rpx;
			height: 60rpx;
			border:1px solid #00C200;
			position: absolute;
			top:0;
			left: 0;
			border-radius: 50%;
			background: rgba(0,194,0,0.08);
			.star{
				width: 36rpx;
				height: 34rpx;
				line-height: 34rpx;
				text-align: center;
				position: absolute;
				top:-18rpx;
				right:14rpx;
				color:#fff;
				img{
					width: 100%;
					height: 100%;
					position: absolute;
					top:-2rpx;
					right:0;
				}
				p{
					position: relative;
					z-index: 10;
					font-size:20rpx
				}
			}
		}
	}

	.tmt-content {
		padding-bottom: 20rpx;

		.tmt-week-wrap {
			display: flex;

			.week-item {
				font-size: 28rpx;
			}
		}

		.tmt-day-wrap {
			display: flex;
			flex-wrap: wrap;
			transition: height .3s;
		}
	}

	.tmt-footer {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		margin-top: -36rpx;

		.arrow-down {
			width: 18rpx;
			height: 18rpx;
			transform: rotate(-45deg);
                border-left-width: 1rpx;
                border-bottom-width: 1rpx;
                border-left-style: solid;
                border-bottom-style: solid;
			transition: all .3s;

			&.on {
				transform: rotate(135deg);
			}
		}
	}
	.day_on{
		background: #255ada;
		color:#fff;
	}
	.thisWeek_on{
		background: #255ada;
		color:#fff !important;
	}
	.nextWeek_on{
		background: #d4e1ff;
		color:#6f98ff !important;
	}
	.wifi_pop {
		position: relative;
		z-index: 999;
        /deep/ .van-popup {
            background: none;
            width: 530rpx;
        }

        .box {
            width: 530rpx;
            height: 804rpx;
            position: relative;

            .bj {
                width: 530rpx;
                height: 804rpx;
                top: 0;
                left: 0;
                position: absolute;
            }

            .nr {
                position: relative;
                z-index: 10;
                width: 80%;
                margin: 0 auto;
                top: 180rpx;
                .name{
                  text-align: center;
                  font-size: 36rpx;
                  font-weight: 500;
                  color: #000000;
                  margin-bottom:20rpx;
                }
                .text{
                  font-size: 28rpx;
                  color: #000000;
                  text-align: center;
                  margin-bottom:20rpx;
                  img{
                    width: 24rpx;
                    height: 24rpx;
                    margin-right:4rpx;
                  }
                  span{
                    font-size:40rpx;
                    color:#FF6600;
                    margin-left:8rpx;
                  }
                }
                .room_name{
                  font-size: 30rpx;
                  font-weight: 500;
                  color: #00C200;
                  text-align: center;
                  margin-bottom:34rpx;
                }
                .zhanghao {
                    background: #F9F9F9;
                    font-size: 26rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #666666;
                    padding: 22rpx;
                    border-radius: 16rpx;
                    line-height: 42rpx;
					height: 350rpx;
					overflow: auto;
                }
            }

            .anniu {
                height: 80rpx;
                line-height: 80rpx;
                background: #00C200;
                border-radius: 40rpx;
                margin-top: 30rpx;
                font-size: 32rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
            }

            .anniu1 {
                width: 434rpx;
                height: 80rpx;
                line-height: 80rpx;
                background: #00C200;
                border-radius: 40rpx;
                margin: 0 auto;
                margin-top: 40rpx;
                font-size: 32rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                text-align: center;
                position: relative;
                top: 250rpx;
            }

            .nr1 {
                display: flex;
                align-items: center;
                justify-content: space-around;
                padding-bottom: 48rpx;
                position: relative;
                top: 280rpx;
            }

            button::after {
                border: none;
            }

            button {
                background: none;
                color: #222;
                margin: 0;

                .img {
                    width: 160rpx;
                    height: 160rpx;
                    background: #F8F8F8;
                    border-radius: 16rpx;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    justify-content: center;

                    .img1 {
                        width: 70rpx;
                        height: 70rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        img {
                            width: 56rpx;
                            height: 48rpx;
                        }
                    }

                    .img2 {
                        width: 70rpx;
                        height: 70rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        img {
                            width: 42rpx;
                            height: 56rpx;
                        }
                    }
                }

                .text {
                    font-size: 26rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    color: #111111;
                    text-align: center;
                }
            }
        }

        .close {
            width: 64rpx;
            height: 64rpx;
            margin: 32rpx auto 0 auto;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>
